<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  modelValue: {
    pageNum: number
    pageSize: number
    total: number
  }
  showExport: boolean
}
const emits = defineEmits([
  'changeNum',
  'changeSize',
  'exportCurrentPage',
  'exportAll',
  'update:modelValue',
])
const props = defineProps<Props>()

/*
 * 中转双向绑定计算属性
 */
const tempModelValue = computed({
  get() {
    return props.modelValue
  },
  set(val: any) {
    emits('update:modelValue', val)
  },
})
// 分页回调
const changeNum = (val: number) => {
  emits('changeNum', val)
}
const changeSize = (val: number) => {
  emits('changeSize', val)
}
// 导出当前页
const exportCurrentPage = () => {
  emits('exportCurrentPage')
}
// 导出全部
const exportAll = () => {
  emits('exportAll')
}
</script>
<template>
  <div class="page-export">
    <div class="export-btn" v-if="props.showExport">
      <el-link type="primary" @click="exportCurrentPage">导出当前页</el-link>
      <el-link type="primary" @click="exportAll">导出全部</el-link>
    </div>
    <el-pagination
      v-if="tempModelValue"
      class="page"
      v-model:current-page="tempModelValue.pageNum"
      v-model:page-size="tempModelValue.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="tempModelValue.total"
      @size-change="changeSize"
      @current-change="changeNum"
    />
  </div>
</template>

<style lang="scss" scoped>
.page-export {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  height: 32px;
  .export-btn {
    margin-right: 10px;
  }
}
</style>
